﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Map</title>
			<style type="text/css"> 
			#title{ 					
					font: 70px 굴림;
					margin-left : 0px;
					background-image(img/title.jpg);
					color : black;
					}   
			.indexButton{
					
					border: 1x solid #ff0080;
					color : #ff0080;
					background-Color:#ffe6f2;
					font: 70px 굴림;
					font-weight: bold;
					width:  80; height:80;
					padding-right: 30px;
			
			}
			#markinfo{
					font: 200px;
					margin-left: 5px;
					font-weight:bold;
			}
			div.tabs-area {   
				position:relative;   
				z-index:2;   
				width:100%;   
				height:45px;   
				padding:0;margin:0;overflow:hidden;   
			}   
			  
			div.tabs-line {   
				position:relative;   
				z-index:1;   
				width:100%;   
				height:1px;   
				top:-1px;   
				border-top:1px solid #D3D9E6;   
			}   
			</style>  
			<!--<![endif]-->  
			<style type='text/css'>  
			  
			ul.tabs {   
				padding:0px;margin:0px;   
				z-index:2;   
			}   
			  
			ul.tabs li {   
				list-style:none;   
				display:inline;   
				height:50px;   
			}   
			  
			ul.tabs li a {   
				padding:5px 20px 3px 20px;   
				border:1px solid #D3D9E6;   
				text-decoration:none;      
				font-size:9pt;   
				line-height:30px;   
				color:#4B69AF;    
				background:#E9ECF2;   
			}   
			  
			ul.tabs li a:hover {      
				background:#E8FFFF;   
			}   
			  
			ul.tabs li a.active {      
				background:#fff;   
				color:#4B69AF;      
				border:1px solid #D3D9E6;       
				border-bottom: 1px solid #ffffff;      
				padding:10px 20px 3px 20px;   
				font-weight:bold;   
				line-height:70px;   
			}   
			  
			div.content {   
				/* 컨텐츠 영역 박스 스타일 지정 하는곳 */   
			}   
			div.show        { display:block;}   
			div.hide        { display:none; }   
			</style>
<script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=93fd0e6f69a94f9ab4040082def1427a38d66de6">
</script>
</head>
<body>
		<div id="title">
			<img src="img/mg.jpg" width="200" height="200" alt="main image" />
			음식점 위생등급정보
			<input type="button" value="Return main" onclick="returnmain()" class="indexButton">
		</div>
	<div id="map" style="width:1200px;height:500px;"></div>
	<script type="text/javascript">
	function returnmain()
			 {  
				document.location="index.html";
				} 
	function toggleOpenMark(mark_no)
	{
		if(marks[mark_no].options.infowindow.isShow())
			marks[mark_no].options.infowindow.hide();
		else
			marks[mark_no].options.infowindow.show();
	}
 
 
	var map = new DMap("map");
	map.setCenter(new DLatLng(37.5114573832174, 127.05932685193826), 2);
	
	map.addControl(new DZoomControl());
	
	
	
	var marks = new Array(100);
	var iconurl = 'img/A.jpg';
	var icon = new DIcon(iconurl, new DSize(31,35), new DPoint(0,0));
	<!-- 마크 icon 을 정의해서 표시 --> 
	var iconurl_2 = 'img/B.jpg' 
	var icon_2 = new DIcon(iconurl_2, new DSize(31, 35), new DPoint(0, 0));

	var iconurl_3 = 'img/C.jpg' 
	var icon_3 = new DIcon(iconurl_3, new DSize(31, 35), new DPoint(0, 0));
	
	
	DDownloadUrl("coord/data.xml", function(_xml){
		var _marker = _xml.getElementsByTagName("marker");
 
		for (var i = 0; i < _marker.length; i++){
            var point = new DLatLng(parseFloat(_marker[i].getAttribute("lat")), parseFloat(_marker[i].getAttribute("lng")));
			var marker_name = _marker[i].getAttribute("name");
			var marker_location = _marker[i].getAttribute("loac");
			var marker_phone=_marker[i].getAttribute("phone");
			var marker_homepage=_marker[i].getAttribute("homepage");
			var infoBoxMessage = "<div id=markinfo> 음식점 이름 : </div>"+ marker_name + "<br>"+"<div id=markinfo> 주소 : </div>" +marker_location +"<br>"
			+"<div id=markinfo> 전화번호 : </div>"+marker_phone+"<br>"+"<div id=markinfo> 홈페이지 주소 : </div>"+marker_homepage+"<a href=http://www.sushimoto.co.kr/>홈페이지로 이동</a> "; 
			
			marks[i] = new DMark(point, { infowindow : new DInfoWindow(infoBoxMessage, {width:500, height:300}),
										   draggable :false ,
										   mark : icon });
            map.addOverlay(marks[i]);
		}
		
		map.setCenter(point, 3);
 
	});
	
	DDownloadUrl("coord/data_2.xml", function(_xml){
		var _marker = _xml.getElementsByTagName("marker");
 
		for (var i = 0; i < _marker.length; i++){
            var point = new DLatLng(parseFloat(_marker[i].getAttribute("lat")), parseFloat(_marker[i].getAttribute("lng")));
			var marker_name = _marker[i].getAttribute("name");
			var marker_location = _marker[i].getAttribute("loac");
			var marker_phone=_marker[i].getAttribute("phone");
			var marker_homepage=_marker[i].getAttribute("homepage");
			var infoBoxMessage = "<div id=markinfo> 음식점 이름 : </div>"+ marker_name + "<br>"+"<div id=markinfo> 주소 : </div>" +marker_location +"<br>"
			+"<div id=markinfo> 전화번호 : </div>"+marker_phone+"<br>"+"<div id=markinfo> 홈페이지 주소 : </div>"+marker_homepage+"<a href=http://www.sushimoto.co.kr/>홈페이지로 이동</a> "; 
			
			marks[i] = new DMark(point, { infowindow : new DInfoWindow(infoBoxMessage, {width:500, height:300}),
										   draggable :false ,
										   mark : icon_2 });
            map.addOverlay(marks[i]);
		}
		
 
	});
	DDownloadUrl("coord/data_3.xml", function(_xml){
		var _marker = _xml.getElementsByTagName("marker");
 
		for (var i = 0; i < _marker.length; i++){
            var point = new DLatLng(parseFloat(_marker[i].getAttribute("lat")), parseFloat(_marker[i].getAttribute("lng")));
			var marker_name = _marker[i].getAttribute("name");
			var marker_location = _marker[i].getAttribute("loac");
			var marker_phone=_marker[i].getAttribute("phone");
			var marker_homepage=_marker[i].getAttribute("homepage");
			var infoBoxMessage = "<div id=markinfo> 음식점 이름 : </div>"+ marker_name + "<br>"+"<div id=markinfo> 주소 : </div>" +marker_location +"<br>"
			+"<div id=markinfo> 전화번호 : </div>"+marker_phone+"<br>"+"<div id=markinfo> 홈페이지 주소 : </div>"+marker_homepage+"<a href=http://www.sushimoto.co.kr/>홈페이지로 이동</a> "; 
			
			marks[i] = new DMark(point, { infowindow : new DInfoWindow(infoBoxMessage, {width:500, height:300}),
										   draggable :false ,
										   mark : icon_3 });
            map.addOverlay(marks[i]);
		}
		
 
	});
	function tabs(idx){   
			for(i = 1; i <= 3 ; i++ ){   
				document.getElementById('tab'+i).className = "";   
				document.getElementById('content'+i).className = "content hide";   
			}   
			document.getElementById('tab'+idx).className = "active";   
			document.getElementById('content'+idx).className = "content show";   
		}   
	</script>
	<div>  
    <div class='tabs-area'>  
        <ul class='tabs'>  
        <li> </li>  
        <li><a id='tab1' title="Tab1 Desc" href="javascript:tabs('1');" class='active'><strong>A등급 음식점</strong></a></a></li>  
        <li><a id='tab2' title="Tab2 Desc" href="javascript:tabs('2');">B등급 음식점</a></li>  
        <li><a id='tab3' title="Tab3 Desc" href="javascript:tabs('3');">C등급 음식점</a></li>  
        </ul>  
    </div>  
    <div class='tabs-line'></div>  
	</div>  
	  
	  
	<div id='content1' class='content show'>  
		<h1><a href=http://www.sushimoto.co.kr/>스시모토</a></h1>  
	</div>  
	<div id='content2' class='content hide'>  
		<h1>Content 2</h1>  
	</div>  
	<div id='content3' class='content hide'>  
		<h1>Content 3</h1>  
	</div>  
	</body>
</html>
